﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>数据管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="MyraStudio" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/theme.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="/assets/layui/css/transfer.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bootstrap-editable.css" rel="stylesheet" type="text/css" />
    <style>
        .login-user {
            display: flex;
            color: #000;
            line-height: 30px;
        }

        .login-user input {
            height: 30px;
            border-radius: 4px;
            margin: 0px 4px;
        }

        .login-user select {
            height: 30px;
            border-radius: 4px;
            margin: 0px 4px;
            width: 20px;
        }
    </style>
</head>

<body>

    <!-- Begin page -->
    <div id="layout-wrapper">
        <div class="container-fluid" style="margin-top: 10px;">

            <!-- start page title -->
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="form-header h4">数据回放</h4>
                            <div carousel-item class="layui-form" lay-filter="playbackfield">
                                <div>
                                    <form class="layui-form"
                                        style="margin: 0 auto;max-width: 1150px ;padding-top: 40px;">
                                        <div class="layui-form-item">
                                            <div class="layui-inline ">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">时间范围选择:</label>
                                                <div class="layui-input-block login-user">
                                                    <input type="text" class="layui-input" id="laydate_startTime"
                                                        name="laydate_startTime" lay-verify="required"
                                                        placeholder="年/月/日—小时:分钟:秒" />到
                                                    <input type="text" class="layui-input" id="laydate_endTime"
                                                        name="laydate_endTime" lay-verify="required"
                                                        placeholder="年/月/日—小时:分钟:秒" />
                                                </div>
                                            </div>
                                            <div class="layui-inline ">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">存储节点IP:</label>
                                                <div class="layui-input-block login-user">
                                                    <select name="storage_ip" id="storage_ip" lay-filter="xmFilter">
                                                        <option value=""></option>
                                                    </select>
                                                    <!-- <input type="text" name="storage_ip" id="storage_ip" 
                                                        class="layui-input" required /> -->
                                                </div>
                                            </div>
                                            <div class="layui-inline " style="float: right">
                                                <button type="button" class="btn btn-primary waves-effect waves-light"
                                                    onclick="addRow()">新增数据回放条件</button>
                                            </div>
                                        </div>
                                        <!-- <div class="layui-form-item">

                                            <div class="layui-inline ">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">控制设备IP:</label>
                                                <div class="layui-input-block login-user">
                                                    <input type="text" name="control_ip" id="control_ip"
                                                        lay-verify="required" class="layui-input" required />
                                                </div>
                                            </div>
                                            <div class="layui-inline ">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">控制设备端口:</label>
                                                <div class="layui-input-block login-user">
                                                    <input type="text" name="control_port" id="control_port"
                                                        lay-verify="required" class="layui-input port" required />
                                                </div>
                                            </div>
                                            <div class="layui-inline ">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">存储节点IP:</label>
                                                <div class="layui-input-block login-user">
                                                    <select name="storage_ip" id="storage_ip" lay-filter="xmFilter">
                                                        <option value=""></option>
                                                    </select>
                                                    <input type="text" name="storage_ip" id="storage_ip" 
                                                        class="layui-input" required /> -->
                                                <!-- </div>
                                            </div>
                                            <div class="layui-inline " style="float: right">
                                                <button type="button" class="btn btn-primary waves-effect waves-light"
                                                    onclick="addRow()">新增数据回放条件</button>
                                            </div>
                                        </div> --> 
                                    </form>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12 select-table table-striped">
                                        <form id="form-add">

                                            <table id="bootstrap-table"></table>

                                        </form>

                                    </div>
                                </div>
                            </div>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->





            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form id="form-play">
                                <figure style="text-align: center;">
                                    <div>
                                        <a id="btn_play" href='javascript:;' class='btn btn-xs blue' title='播放'><span
                                                class='feather-play'></span></a>
                                        <a id="btn_continue" href='javascript:;' class='btn btn-xs blue' title='继续'
                                            onclick="data_playback_continue()" style="display: none;"><span
                                                class='feather-play'></span></a>
                                        <a id="btn_pause" href='javascript:;' class='btn btn-xs blue'
                                            onclick="data_playback_pause()" title='暂停' style="display: none;"><span
                                                class='feather-pause'></span></a>
                                        <span>倍速:</span>
                                        <select name="btn_speed" id="btn_speed">
                                            <option value="0.5">x0.5</option>
                                            <option value="1" selected>x1</option>
                                            <option value="2">x2</option>
                                            <option value="3">x3</option>
                                        </select>
                                        <progress id="progress" value="0" max="100" style="width: 800px"></progress>
                                        <a id="btn_delete" href='javascript:;' class='btn btn-xs blue'
                                            onclick="data_playback_delete()" title='删除'><span
                                                class='feather-x'></span></a>
                                        <!-- <span id="curTime">00:00:00</span>/<span id="totalTime">00:00:00</span> -->
                                        <div>
                                            <div id="showtime" style="display:inline">
                                                <span>00</span>
                                                <span>:</span>
                                                <span>00</span>
                                                <span>:</span>
                                                <span>00</span>
                                            </div>/<div style="display:inline"><span id="totalTime">00 : 00 : 00</span>
                                            </div>
                                        </div>


                                    </div>

                                </figure>
                            </form>
                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->

        </div> <!-- container-fluid -->

    </div>
    <!-- END layout-wrapper -->

    <!-- Overlay-->
    <div class="menu-overlay"></div>


    <script>
        var ipm = '[[${manageIp}]]';
    </script>
    <!-- jQuery  -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/metismenu.min.js"></script>
    <script src="/assets/js/waves.js"></script>
    <script src="/assets/js/simplebar.min.js"></script>
    <script src="/assets/layui/layui.js"></script>
    <script src="/assets/js/bootstrap-table.js"></script>
    <script src="/assets/js/bootstrap-table-zh-CN.js"></script>
    <script src="/assets/js/bootstrap-editable.js"></script>
    <script src="/assets/js/bootstrap-table-editable.js"></script>
    <!-- Morris Js-->
    <script src="/assets/plugins/morris-js/morris.min.js"></script>
    <!-- Raphael Js-->
    <script src="/assets/plugins/raphael/raphael.min.js"></script>

    <!-- Chart Js-->
    <script src="/assets/plugins/jquery-knob/jquery.knob.min.js"></script>

    <!-- Morris Custom Js-->
    <script src="/assets/pages/data-playback-demo.js"></script>
    <script src="/assets/pages/arrowall.js"></script>

    <!-- App js -->
    <script src="/assets/js/theme.js"></script>



    <script>



        // //获取视频总时间  在视频加载完成后触发该函数
        // ele.onloadedmetadata = function () {
        //     var totalTime = document.getElementById("totalTime");
        //     var allTime = ele.duration;
        //     var m = Math.floor(allTime % 3600 / 60);
        //     var s = Math.floor(allTime % 60);
        //     m = m >= 10 ? m : '0' + m;
        //     s = s >= 10 ? s : '0' + s;
        //     totalTime.innerHTML = m + ':' + s;
        // }

        // //视频播放位置发生改变时触发该函数
        // ele.ontimeupdate = function () {
        //     var progress = document.getElementById("progress");
        //     var curTime = document.getElementById("curTime");
        //     progress.value = 100 * ele.currentTime / ele.duration; ///this.totaltime;
        //     var time = ele.currentTime;
        //     var m = Math.floor(time % 3600 / 60);
        //     var s = Math.floor(time % 60);
        //     m = m >= 10 ? m : '0' + m;
        //     s = s >= 10 ? s : '0' + s;
        //     curTime.innerHTML = m + ':' + s;
        // }

    </script>
</body>

</html>